<template>
	<div class="news-list">
		<div class="news-list-head">
			<h4>{{ title }}</h4>
			<router-link :to="'#'" append class="more">更多</router-link>
		</div>
			<item class="item-wrap" v-for="(item, index) in items" @click.native="onItemClick(index)">
				<div class="item-title">
					<p>{{item.title}}</p>
				</div>
				<div class="item-imgs">
					<img :src="item.thumbnail_pic_s" alt="">
					<img :src="item.thumbnail_pic_s02" alt="">
					<img :src="item.thumbnail_pic_s03" alt="">
				</div>
				<div class="item-footer">
					<span>{{item.author_name}}</span>
					<span>{{item.date}}</span>
				</div>
			</item>
	</div>
</template>

<script>
	export default {
		name: 'news-list',
		props: {
			title: {
				type: String
			},
			items: {
				type: Array
			}
		},
		data () {
			return {

			}
		}
	}
</script>

<style lang="sass" scoped>
	$main-color: #596990;
	$news-title-color: #101010;
	.news-list {

		.news-list-head {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 15px 15px 8px 15px;
			margin-bottom: 8px;
			border-bottom: 1px solid rgba(89, 105, 144, .16);

			h4 {
				margin: 0;
				font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
				font-size: 16px;
				font-weight: bold;
				color: $main-color;
			}
			.more {
				font-size: 14px;
				color: $main-color;
				text-decoration: none;
			}
		}
		.item-wrap {
			background: #f5f5f5;

			.item-title {	
				height: 40px;
				overflow: hidden;

				p {
					font-size: 14px;
					line-height: 20px;
					color: $news-title-color;
					white-space: normal;
				}
			}
			.item-imgs {
				display: flex;
				justify-content: space-between;
				margin: 5px -5px;

				img {
					width: calc(33.3% - 10px);
					margin: 5px;
					height: 100px;
					border-radius: 3px;
					box-sizing: border-box;
				}
			}
			
			.item-footer {
				display: flex;
				justify-content: space-between;

				font-size: 12px;
				color: #999;
			}
		}
		
	}
</style>